<template>
    <div class="logistics-management">
       <!-- 状态标签 -->
       <el-tabs v-model="searchForm.status"  @tab-click="onSearch"> 
          <el-tab-pane label="全部" name=""></el-tab-pane>
          <el-tab-pane label="未结算" name="1"></el-tab-pane>
          <el-tab-pane label="修改审批中" name="2"></el-tab-pane>
          <el-tab-pane label="已完成" name="3"></el-tab-pane>
          <el-tab-pane label="审批不通过" name="4"></el-tab-pane>
        </el-tabs>
      <!-- 搜索栏 -->
      <el-form :inline="true"  class="demo-form-inline">    
        <el-form-item>
          <el-input  placeholder="请输入关键词搜索" clearable v-model="searchForm.keyword" ></el-input> 
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">搜索</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
  
      <!-- 数据表格 -->
      <el-table :data="tableData" 
      @selection-change="handSelectionChange"
      style="width: 100%"
      >
       <!--           多选按钮        -->
        <el-table-column type="selection" >
        </el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <el-button size="mini"  @click="UpdateOrder(scope.row)"  :disabled="scope.row.status === 2" >订单修改</el-button>
            <el-button size="mini"  @click="billingBtn(scope.row)"  :disabled="scope.row.status === 3" >结算</el-button>
            <el-button size="mini"  @click="chaiFenBtn(scope.row)"  :disabled="scope.row.status === 3" >订单拆分</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="orderCode" label="订单编号" width="200px">
        </el-table-column>
        <el-table-column prop="status" label="订单状态" width="130px">
              <template slot-scope="scope">
                    {{scope.row.status == 1?'未结算':
                    (scope.row.status == 2?'修改审批中':
                    (scope.row.status == 3?'已完成':
                    (scope.row.status == 4?'审批不通过':'未知状态'
                    )))}}
                  </template>
        </el-table-column>
        <el-table-column prop="orderType" label="订单种类" width="150px">
          <template slot-scope="scope">
                    {{scope.row.orderType == 0?'正常订单':
                    (scope.row.orderType == 1?'特价订单':'未知状态'
                    )}}
                  </template>
        </el-table-column>
        <el-table-column prop="salespersonName" label="销售员姓名" width="150px"></el-table-column>
        <el-table-column prop="customerCode" label="客户代码"  width="160px"></el-table-column>
        <el-table-column prop="customerName" label="客户名称"  width="160px"></el-table-column>
        <!-- <el-table-column prop="originalOrderCode" label="拆单对应的原本订单编号"></el-table-column> -->
        <el-table-column prop="returnAmount" label="退货款金额"  width="130px"></el-table-column>
        <el-table-column prop="salespersonCode" label="销售员代码" width="130px"></el-table-column>
        <el-table-column prop="applicationDate" label="申请日期"  width="160px"></el-table-column>
        <el-table-column prop="customerPhone" label="客户电话" width="160px"></el-table-column>
        <el-table-column prop="depositAmount" label="定金金额" width="130px"></el-table-column>
        <el-table-column prop="specialDiscount" label="特价折扣" width="130px"></el-table-column>
        <el-table-column prop="productCode" label="产品代码" width="130px"></el-table-column>
        <el-table-column prop="productQuantity" label="购买产品个数"  width="150px"></el-table-column>
        <el-table-column prop="totalPrice" label="计算后订单总价"  width="160px"></el-table-column>
        <el-table-column prop="applicationReason" label="申请理由"  width="200px"></el-table-column>
        <el-table-column prop="taxAmount" label="订单显示状态"  width="130px"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="160px"></el-table-column>
        <el-table-column prop="createPerson" label="创建人"></el-table-column>
        <el-table-column prop="updateTime" label="修改时间" width="160px"></el-table-column>
        <el-table-column prop="updatePerson" label="修改人" width="150px"></el-table-column>
        
      </el-table>
  
      <!-- 分页 -->
      <el-pagination
          background
          :page-sizes="[3, 5, 7,10, 20]"
          :page-size="pageSize"
          :current-page="pageNum"
          layout=" total,sizes,prev, pager, next,jumper"
          :total="total"
          @next-click="nextPage"
          @prev-click="prevPage"
          @current-change="changePage"
          @size-change="sizeChange">
      </el-pagination>

      <!--        //拆分弹框开始----------------------------------------------------------------------------------------------------->
      <el-dialog title="是否确认通过审批" :visible.sync="chaiFenVisible" width="70%" custom-class="custom-dialog"
            :close-on-click-modal="false">
            <div class="dialog-content">
                <div class="confirm-item">
                    <span class="dialog-label">请输入拆分数量：</span>
                    <el-input v-model="chaiFenCount" placeholder="请输入拆分数量"></el-input>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button class="cancel-btn" @click="chaiFenVisible = false">取 消</el-button>
                <el-button type="primary" class="confirm-btn" @click="makeSureCount">确认</el-button>
            </div>
        </el-dialog>
        <!--        //拆分弹框结束----------------------------------------------------------------------------------------------------->
        <!--        //拆分第二个弹框开始----------------------------------------------------------------------------------------------------->
      <el-dialog title="是否确认通过审批" :visible.sync="chaiFenErVisible" width="70%" custom-class="custom-dialog"
            :close-on-click-modal="false">
            <div class="dialog-content">
                <div class="confirm-item">
                    <span class="dialog-label">请输入拆分数量：</span>
                    <el-input v-model="chaiFenCount" placeholder="请输入拆分数量"></el-input>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button class="cancel-btn" @click="chaiFenErVisible = false">取 消</el-button>
                <el-button type="primary" class="confirm-btn">确认</el-button>
            </div>
        </el-dialog>
        <!--        //拆分第二个弹框开始----------------------------------------------------------------------------------------------------->


    </div>
  </template>
  
  <script>

  export default {
    name: 'LogisticsManagement',
    data() {
      return {
        searchForm: {
          status:'',
          // keyword:'',
          // originId: [],
        },
        tableData: [], // 这里需要填充实际的数据
        pageSize: 7,
        total: 0,
        pageNum:1,
        chaiFenVisible:false,
        chaiFenErVisible:false,
        chaiFenCount:'',
        order:{},


    
      }
    },
    methods: {
      //结算
      billingBtn(val){
        //打开弹窗

      },
      UpdateOrder(val){
        // 导航到详情页面，只传递 ID
        this.$router.push({ path: '/order/updateOrder', query: { 'orderCode': val.orderCode } })
      },
      onSearch() {
        // 实现搜索逻辑
        let pageParam = {};
        pageParam.pageNum = this.pageNum;
        pageParam.pageSize = this.pageSize;
        pageParam.param = this.searchForm;
        this.$axios.post("/api/order-server/order/queryOrderList",pageParam)
            .then(resp =>{
              console.log(resp.data)
              if(resp.data.code==200){
                //给数据tableData赋值
                this.tableData =resp.data.data.list
                //给分页总数赋值
                this.total = resp.data.data.total
            }
            })
      },
      onReset() {
        // 重置搜索表单
        this.searchForm = {
          status:'',
        }
        this.onSearch()
      },

      //分页数据

      handleSizeChange(val) {
        this.pageSize = val;
        // 重新加载数据
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        // 重新加载数据
      },
    nextPage(val){   //val 当前页 方法自动获取当前页
              //下一页  获取当前页pageNum
              this.pageNum= val;
              this.onSearch();
          },
    prevPage(val){
        //下一页
        this.pageNum= val;
        this.onSearch();
    },
    changePage(val){
        //当前页
        this.pageNum= val;
        this.onSearch();
    },
    sizeChange(val){
        //下拉框  每页条数
        this.pageSize= val;
        this.pageNum=1;
        this.onSearch();
    },
    chaiFenBtn(val){
      //打开弹窗
      this.chaiFenVisible = true;
      this.order = val;
    },
    makeSureCount(){
      this.$axios.get("/api/order-server/zsbOrder/queryChaiFenCOunt/" + this.chaiFenCount + "/" + this.order.orderCode)
                .then(resp => {
                    console.log(resp.data)
                    if (resp.data.code == 200) {
                        this.chaiFenErVisible = true;
                    }
                    if(resp.data.code == 500){
                      this.$message.error("拆分数量不能大于订单产品数量");
                    }
                })
    }

    },
    created() {
      this.onSearch()
    },
  }
  </script>
  
  <style scoped>
  .logistics-management {
    padding: 20px;
  }
  </style>